<template>
  <div class="mt-10 ml-10 mr-10"> 
    <el-card>
      <div class="flex aic f16">
        <p>
          <span class="bs">子账号 / </span>
          <span class="jia">添加子账号</span>
          <span class="f14"> - 可添加当前组织的子账号，并为其分配权限。</span>
        </p>
      </div>
  </el-card>
  </div>
  <el-card class="mt-10 ml-10 mr-10">
    <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="*账号:" prop="account">
      <el-input v-model="ruleForm.account" style="width:300px" />
    </el-form-item>
    <el-form-item label="*用户名称:" prop="username">
      <el-input v-model="ruleForm.username" style="width:300px" />
    </el-form-item>
    <el-form-item label="*密码:" prop="password">
      <el-input v-model="ruleForm.password" style="width:300px" show-password />
    </el-form-item>
    <el-form-item label="*确认密码:" prop="fixPassword">
      <el-input v-model="ruleForm.fixPassword" style="width:300px" show-password />
    </el-form-item>

    <el-form-item label="*类型:" prop="type" >
      <el-radio-group v-model="ruleForm.type">
        <el-radio label="1" />
        <el-radio label="2" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="账号描述:" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" style="width:300px" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm()">确定</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
  </el-card>
</template>

<script  setup>
import { onMounted, reactive,ref } from "vue";
import * as api from "@/api/index";
import { h } from 'vue'
import { ElNotification } from 'element-plus'
import { useRoute } from "vue-router";
const route = useRoute();

const formSize = ref('default')
const ruleForm = reactive({
  account: '1',
  username: '1',
  password: '1',
  fixPassword: '1',
  type: '1',
  desc: '1',
})
const submitForm = ()=>{
  console.log("xxxxxxx",ruleForm)
    if(!ruleForm.account){
       ElNotification({
          title: '错误',
          message: h('i', { style: 'color: teal' }, '账号没输入')
        });
    }
    else if(!ruleForm.username){
       ElNotification({
          title: '错误',
          message: h('i', { style: 'color: teal' }, '用户名称没输入')
        });
    }
    else if(!ruleForm.password){
        ElNotification({
          title: '错误',
          message: h('i', { style: 'color: teal' }, '密码没输入')
        });
    }
    else if(!ruleForm.fixPassword){
        ElNotification({
          title: '错误',
          message: h('i', { style: 'color: teal' }, '新密码没输入')
        });
    }
    else if(!ruleForm.type){
        ElNotification({
          title: '错误',
          message: h('i', { style: 'color: teal' }, '类型没输入')
        });
    }
    else if(!ruleForm.desc){
        ElNotification({
          title: '错误',
          message: h('i', { style: 'color: teal' }, '账号描述没输入')
        });
    }   
    else if(ruleForm.password !== ruleForm.fixPassword){
        ElNotification({
          title: '错误',
          message: h('i', { style: 'color: teal' }, '新密码和旧密码不一样')
        });
    }   
      else{
        console.log(ruleForm)
        let data = {
        account:ruleForm.account,
        username:ruleForm.username,
        password:ruleForm.password,
        fixPassword:ruleForm.fixPassword,
        type:ruleForm.type,
        desc:ruleForm.desc,
        }
        api.$accountAdd(data).then(res=>{
          console.log(`output->res`,res)
        })
         ElNotification({
          title: '添加成功',
          message: h('i', { style: 'color: teal' }, '成功')
        });
      }
}
const resetForm = ()=>{
        ruleForm.account='',
        ruleForm.username='',
        ruleForm.password='',
        ruleForm.fixPassword='',
        ruleForm.type='',
        ruleForm.desc=''
}
const listForm = ()=>{
  ruleForm.account=route.query.account
  ruleForm.username=route.query.username
  ruleForm.password=route.query.password
  ruleForm.fixPassword=route.query.fixPassword
  ruleForm.type=route.query.type
  ruleForm.desc=route.query.desc
  console.log(`output->`,route.query)
}
onMounted(listForm)
</script>
